<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Quick Doc Service Home Page">
    <meta name="author" content="Michael Chen">
    <meta name="keyword" content="Quick Doc Service">
    <link rel="shortcut icon" href="images/favicon.png">
    <title th:text="${title}"></title>

    <!-- Icons -->
    <link href="css/flag-icon.min.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/simple-line-icons.css"/>
    <!--layui and necessary plugins-->
    <link rel="stylesheet" type="text/css" href="/lib/layui/css/layui.css" media="all"/>
    <!-- Main styles for this application -->
    <link rel="stylesheet" type="text/css" href="css/style.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/mxleader-style.css"/>
</head>

<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<header class="app-header navbar">
    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none mr-auto" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>

    <ul class="nav navbar-nav d-md-down-none">
        <li class="nav-item px-3">
            <a class="nav-link" href="files">文件管理</a>
        </li>
        <li class="nav-item px-3">
            <a class="nav-link" href="folders">目录管理</a>
        </li>
        <li class="nav-item px-3">
            <a class="nav-link" href="users">系统用户</a>
        </li>
    </ul>
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
               aria-expanded="false">
                <img src="img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <div class="dropdown-header text-center">
                    <strong>账户</strong>
                </div>
                <a class="dropdown-item" href="#"><i class="fas fa-wrench"></i> 修改密码</a>
                <div class="dropdown-header text-center">
                    <strong>设置</strong>
                </div>
                <a class="dropdown-item" href="#"><i class="fas fa-heart"></i> 我的收藏</a>
                <a class="dropdown-item" href="#"><i class="fas fa-file"></i> 我的文件</a>
                <div class="divider"></div>
                <a class="dropdown-item" href="/logout" target="_top"><i class="fas fa-sign-out-alt"></i> 退出系统</a>
            </div>
        </li>
    </ul>
    <button class="navbar-toggler aside-menu-toggler" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>

</header>

<div class="app-body">
    <div class="sidebar">
        <nav class="sidebar-nav">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="files"><i class="fas fa-file"></i>文件管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="folders"><i class="fas fa-folder"></i>目录管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="users"><i class="fas fa-users"></i>系统用户</a>
                </li>
                <li class="nav-title">
                    文件夹
                </li>
                <li class="nav-item" th:each="folderMenu : ${foldersMenu}">
                    <a class="nav-link" th:href="@{'files/folder@'+${folderMenu.id}}">
                        <i class="fas fa-folder-open"></i><span th:text="${folderMenu.path}"></span>
                    </a>
                </li>
                <li class="nav-item nav-dropdown">
                    <div th:each="folderMenu : ${foldersMenu}">
                        <a class="nav-link nav-dropdown-toggle" th:href="@{'/files/folder@'+${folderMenu.id}}">
                            <i class="fas fa-folder-open"></i><span th:text="${folderMenu.path}"></span>
                        </a>
                    </div>
                    <a class="nav-link nav-dropdown-toggle" href="#"><i class="icon-puzzle"></i> Base</a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item">
                            <a class="nav-link" href="base/breadcrumb.html"><i class="icon-puzzle"></i> Breadcrumb</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="base/cards.html"><i class="icon-puzzle"></i> Cards</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <button class="sidebar-minimizer brand-minimizer" type="button"></button>
    </div>

    <!-- Main content -->
    <main class="main">
        <ol class="breadcrumb">
            <form class="form-inline my-2 my-lg-0" th:action="@{/files/search}">
                <input class="form-control mr-sm-2" type="search" placeholder="文件名" name="filename" id="filename">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <li class="breadcrumb-menu d-md-down-none">
                <div class="btn-group" role="group" aria-label="Button group">
                    <a class="btn" href="./"><i class="fas fa-home"></i> &nbsp;返回首页</a>
                    <a class="btn" href="#"><i class="fas fa-cog"></i> &nbsp;设置</a>
                    <a class="btn" href="/logout" target="_top"><i class="fas fa-sign-out-alt"></i></a>
                </div>
            </li>
        </ol>

        <div class="container-fluid">
            <div id="ui-view"></div>
        </div>
    </main>

    <aside class="aside-menu">

        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="settings" role="tabpanel">
                <h6>设置</h6>

                <div class="aside-options">
                    <div class="clearfix mt-4">
                        <small><b>Option 1</b></small>
                        <label class="switch switch-text switch-pill switch-success switch-sm float-right">
                            <input type="checkbox" class="switch-input" checked>
                            <span class="switch-label" data-on="On" data-off="Off"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </div>
                    <div>
                        <small class="text-muted">Lorem ipsum dolor sit amua.
                        </small>
                    </div>
                </div>

                <div class="aside-options">
                    <div class="clearfix mt-3">
                        <small><b>Option 2</b></small>
                        <label class="switch switch-text switch-pill switch-success switch-sm float-right">
                            <input type="checkbox" class="switch-input">
                            <span class="switch-label" data-on="On" data-off="Off"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </div>
                    <div>
                        <small class="text-muted">Lorem ipsum dololiqua.........
                        </small>
                    </div>
                </div>

                <div class="aside-options">
                    <div class="clearfix mt-3">
                        <small><b>Option 3</b></small>
                        <label class="switch switch-text switch-pill switch-success switch-sm float-right">
                            <input type="checkbox" class="switch-input">
                            <span class="switch-label" data-on="On" data-off="Off"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </div>
                </div>

                <div class="aside-options">
                    <div class="clearfix mt-3">
                        <small><b>Option 4</b></small>
                        <label class="switch switch-text switch-pill switch-success switch-sm float-right">
                            <input type="checkbox" class="switch-input" checked>
                            <span class="switch-label" data-on="On" data-off="Off"></span>
                            <span class="switch-handle"></span>
                        </label>
                    </div>
                </div>

                <hr>
                <h6>我的空间</h6>

                <div class="text-uppercase mb-1 mt-2">
                    <small><b>磁盘1</b></small>
                </div>
                <div class="progress progress-xs">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 95%" aria-valuenow="95"
                         aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <small class="text-muted">243GB/256GB</small>

                <div class="text-uppercase mb-1 mt-2">
                    <small><b>磁盘2</b></small>
                </div>
                <div class="progress progress-xs">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="10"
                         aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <small class="text-muted">25GB/256GB</small>
            </div>
        </div>
    </aside>

</div>

<footer class="app-footer">
    <span><a href="http://www.mxleader.cn">MXLEADER</a> &copy; 2018 GROUPS.</span>
    <span class="ml-auto">Powered by <a href="http://www.mxleader.cn">MXLEADER</a></span>
</footer>

<!-- Bootstrap and necessary plugins -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/pace.min.js"></script>
<script type="text/javascript" src="/lib/layui/layui.js"></script>

<!-- Plugins and scripts required by all views -->
<script src="js/Chart.min.js"></script>

<!-- CoreUI main scripts -->

<script src="js/app.js"></script>

</body>
</html>